import { Button, Table, Select, Space, Image, Modal, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { ReactNode, useEffect, useState, Fragment } from 'react';
import { PlusOutlined, DeleteOutlined, EyeOutlined, EditOutlined } from '@ant-design/icons';
import "./index.css"
import * as api from '../../../api/product'
import Dialog from '@/components/Dialog';
const { Column } = Table;

interface DataType {
    key: React.Key;
    category_id: string;
    categoryName: string;
    creator: string;
    image: ReactNode;
    createTime: string
    updator: string;
    action: ReactNode
}

// 下拉选框select
const { Option } = Select;
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};

// 表格数据
const columns: ColumnsType<DataType> = [
    {
        title: '产品编号',
        dataIndex: 'category_id',
    },
    {
        title: '产品名称',
        dataIndex: 'categoryName',
    },
    {
        title: '产品创建者',
        dataIndex: 'creator',
    },
    {
        title: '产品图片',
        dataIndex: 'image',
    },
    {
        title: '加入时间',
        dataIndex: 'createTime',
    },
    {
        title: '审核状态',
        dataIndex: 'updator'
    },
    {
        title: '操作',
        dataIndex: 'action',
    },
];

const ProductCategory = () => {
    //当前行的数据
    let [currentRow, setCurrentRow] = useState()

    //控制dialog显示 隐藏
    let [visible, setVisible] = useState(false)

    //控制modal显示隐藏
    let [show, setShow] = useState(false)

    // 模态框 确定按钮
    let handleOk = (instance: any) => {
        // console.log(instance)
        //调用表单提交的方法
        instance.current.submit()
        setVisible(false)
    }
    // 模态框 取消按钮
    let handleCancel = () => {
        setVisible(false)
    }

    //点击添加商品按钮处理函数
    let handleAdd = () => {
        setVisible(true)
    }

    // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    //设置加载动画
    let [loading, setLoading] = useState<boolean>(false)

    // 表格数据
    //设置表格属性
    let [category, setCategory] = useState<Array<any>>([])

    // 获取商品类目数据
    let getCategory = () => {
        setLoading(true)
        api.getProductgetCategory()
            .then((res) => {
                // console.log(res.data.data);
                res.data.data.forEach((item: any) => {
                    item.image = <Image src={item.categoryImgurl} width={30} height={20} />
                    item.key = item._id
                    item.action = <Fragment>
                        <Button icon={<EyeOutlined />}>查看</Button>
                        <Button icon={<EditOutlined />} onClick={()=>{
                            
                        }}>编辑</Button>
                        <Button onClick={() => {
                            //弹出确认框
                            setShow(true)
                            //设置currentRow数据r
                            setCurrentRow(item)
                        }} danger icon={<DeleteOutlined onClick={() => {
                            //弹出确认框
                            setShow(true)
                        }} />}>删除</Button>
                    </Fragment>
                })
                setCategory(res.data.data)
                // data = category
                setLoading(false)
            })

    }
    useEffect(() => {
        getCategory()
    }, [])

    //删除类目
    let handleDeleteCategory = () => {
        // console.log(currentRow);
        let { category_id } = currentRow!
        api.delCategory(category_id)
            .then(res => {
                if (res.data.state) {
                    getCategory()
                    message.success('删除成功')
                } else {
                    message.error('删除失败,' + res.data.msg)
                }
            })
    }

    // const start = () => {
    //     setLoading(true);
    //     // ajax request after empty completing
    //     setTimeout(() => {
    //         setSelectedRowKeys([]);
    //         setLoading(false);
    //     }, 1000);
    // };

    // const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    //     console.log('selectedRowKeys changed: ', selectedRowKeys);
    //     setSelectedRowKeys(newSelectedRowKeys);
    // };

    // const rowSelection = {
    //     selectedRowKeys,
    //     onChange: onSelectChange,
    // };
    // const hasSelected = selectedRowKeys.length > 0;
    let el: ReactNode = (
        <div>
            <span>每页显示</span>
            <Select defaultValue="5行" style={{ width: 80 }} onChange={handleChange}>
                <Option value="5">5条</Option>
                <Option value="10">10条</Option>
                <Option value="12">12条</Option>
            </Select>
        </div>
    )

    return (
        <div className='category'>
            <div className="action">
                <Button className="add" type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
                    添加商品
                </Button>
                <Button className="del" type="primary" icon={<DeleteOutlined />}>
                    批量删除
                </Button>
            </div>
            <Modal
                title="删除提示"
                open={show}
                onOk={() => {
                    //关闭弹框
                    setShow(false);
                    handleDeleteCategory()
                }}
                onCancel={() => {
                    setShow(false)
                    message.info('已取消删除')
                }}
                okText="确认"
                cancelText="取消"
            >
                <b>将永久删除数据,是否确定?</b>
                <h1>警告⚠️:不要删除vip类目</h1>
            </Modal>
            <Table title={() => { return el; }} bordered dataSource={category} columns={columns} loading={loading} pagination={{ pageSize: 5 }}>
                {/* <Column title='产品编号' dataIndex='category_id' key='item.key' />
                <Column title="产品名称" dataIndex="categoryName" key='item.key' />
                <Column title="产品创建者" dataIndex="creator" key='item.key' />
                <Column title="产品图片" dataIndex="item.image" key='item.key' />
                <Column title="加入时间" dataIndex="createTime" key="item.key" />
                <Column title="审核状态" dataIndex="updator" key="item.key" />
                <Column title="操作" dataIndex="item.action" key="action" /> */}
            </Table>
            <Dialog visible={visible} onOk={handleOk} onCancel={handleCancel} handleGetCategory={getCategory} />
        </div>
    );
}

export default ProductCategory